import React, { useState, useRef, useEffect } from 'react';
import { EdrmsUseReportStyled } from './style';

import * as echarts from 'echarts/core';
import { GetEdrmsBorrowReport } from '@/services';
import { CommonArrType } from '@/services/types';
type EdrmsUseReportType = {}
const EdrmsUseReport: React.FC<EdrmsUseReportType> = () => {
    const chartRef = useRef(null);

    const [userReport, setUserReport] = useState<CommonArrType[]>();
    const [type, setType] = useState<number>(0);
    const [tittle, setTitle] = useState<string>(`切换为${type == 0 ? '月' : '年'}份展示`);
    // setType(0);
    function getUseReport(type: any) {
        GetEdrmsBorrowReport(type).then((res: any) => {
            res = res || [];
            res.unshift({
                "sort": 0,
                "name": "0",
                "number": 0,
                "perCentNumber": 0
            });
            setUserReport(res)
        });

    }

    useEffect(() => {
        getUseReport(0);

    }, []);


    let option = {
        // title: {
        //     text: 'Stacked Line'
        // },
        tooltip: {
            trigger: 'axis'
        },
        // legend: {

        //     data: ['借阅'],
        //     icon: "ract", textStyle: {//文字颜色
        //         fontSize: 16,
        //         color: '#F1F1F3',
        //         padding: [0, 3]//文字与图形之间的左右间距

        //     },
        //     itemWidth: 34,//图标宽

        // },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            itemSize: 20,
            feature: {
                myTool: {
                    show: true,
                    title: '按照年份展示',
                    icon: 'path://M945.225143 827.099429V172.617143c0-51.712-43.300571-93.915429-97.133714-93.915429h-672.182858c-53.833143 0-97.133714 42.203429-97.133714 93.915429v678.546286c0 51.712 43.300571 93.988571 97.133714 93.988571h651.190858c65.243429 0 118.125714-52.882286 118.125714-118.125714zM827.099429 1024H175.908571C78.994286 1024 0 946.834286 0 851.236571V172.690286C0 77.092571 78.994286 0 175.908571 0h672.182858C945.005714 0 1024 77.092571 1024 172.617143v654.482286A196.900571 196.900571 0 0 1 827.099429 1024z m-39.424-265.654857c23.625143 0 36.644571 10.678857 38.985142 31.890286l0.438858 7.533714c0 26.258286-13.165714 39.350857-39.424 39.350857H236.324571c-23.625143 0-36.644571-10.605714-38.985142-31.890286l-0.438858-7.460571c0-26.331429 13.165714-39.424 39.424-39.424h551.350858z m-428.982858-585.142857l57.344 10.532571c-5.851429 19.894857-11.702857 38.034286-18.724571 55.588572h355.766857v53.833142H573.44v80.749715h159.158857v52.077714H573.44v113.517714h197.778286v54.418286H573.44v126.390857h-55.588571V593.92H252.196571v-54.418286h91.867429V373.906286H517.851429V293.156571H370.395429a361.179429 361.179429 0 0 1-91.867429 102.985143l-37.449143-46.811428c58.514286-43.885714 97.718857-102.4 117.613714-176.128zM517.851429 425.984H400.237714v113.517714H517.851429V425.984z',
                    onclick: function () {
                        
                        setType(0);
                        getUseReport(0);
                    },

                },
                myTool1: {
                    show: true,
                    title: '按照月份展示',
                    icon: 'path://M945.225143 827.099429V172.617143c0-51.712-43.300571-93.915429-97.133714-93.915429h-672.182858c-53.833143 0-97.133714 42.203429-97.133714 93.915429v678.546286c0 51.712 43.300571 93.988571 97.133714 93.988571h651.190858c65.243429 0 118.125714-52.882286 118.125714-118.125714zM827.099429 1024H175.908571C78.994286 1024 0 946.834286 0 851.236571V172.690286C0 77.092571 78.994286 0 175.908571 0h672.182858C945.005714 0 1024 77.092571 1024 172.617143v654.482286A196.900571 196.900571 0 0 1 827.099429 1024z m-39.424-265.654857c23.625143 0 36.644571 10.678857 38.985142 31.890286l0.438858 7.533714c0 26.258286-13.165714 39.350857-39.424 39.350857H236.324571c-23.625143 0-36.644571-10.605714-38.985142-31.890286l-0.438858-7.460571c0-26.331429 13.165714-39.424 39.424-39.424h551.350858zM702.171429 198.948571v458.166858c0 37.449143-19.309714 56.173714-56.758858 56.173714H570.514286l-15.213715-54.418286c25.746286 1.170286 49.737143 2.340571 71.972572 2.340572 12.288 0 18.724571-8.192 18.724571-23.405715v-102.4h-239.908571c-7.606857 74.898286-29.842286 136.923429-66.706286 186.660572l-42.715428-39.204572c36.864-51.492571 55.588571-117.028571 56.758857-196.608V198.948571H702.171429z m-56.173715 193.097143h-236.982857v91.867429h236.982857V392.045714z m0-139.849143h-236.982857v87.771429h236.982857v-87.771429z',
                    onclick: function () {
                        
                        setType(1);
                        getUseReport(1);
                    },

                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            //   月份或年份
            data: userReport?.map(item => item.name)
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            name: '数量/件',
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(219,225,255,1)",
                    width: 1,
                    type: "solid"
                },
            }, splitLine: {
                show: false,
                lineStyle: {
                    color: "rgba(219,225,255,1)",
                }
            }

        },
        series: [
            {
                name: '借阅',
                type: 'line',
                smooth: true,
                symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
                symbolSize: 5,    //小圆点的大小
                lineStyle: {      // 阴影部分
                    shadowOffsetX: 0, // 折线的X偏移    
                    shadowOffsetY: 9,// 折线的Y偏移  
                    shadowBlur: 8,  // 折线模糊
                    shadowColor: "rgba(145, 132, 132, 1)", //折线颜色
                },
                // stack: 'Total',
                data: userReport?.map(item => item.number)
            },
            {
                name: '借阅',
                type: 'bar',
                smooth: false,
                barWidth: '5%',
                lineStyle: {      // 阴影部分
                    shadowOffsetX: 0, // 折线的X偏移    
                    shadowOffsetY: 9,// 折线的Y偏移  
                    shadowBlur: 8,  // 折线模糊
                    shadowColor: "rgba(145, 132, 132, 1)", //折线颜色
                },
                // stack: 'Total',
                data: userReport?.map(item => item.number)
            },
        ]
    };



    useEffect(() => {
        let chart: any = null;
        if (chartRef.current) {
            // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
            chart = echarts.init(chartRef.current);
            // 设置图表实例的配置项和数据
            option && chart.setOption(option);
        }
        return () => {

            //  销毁实例。实例销毁后无法再被使用
            chart.dispose();
        };
    }, [userReport, type]);
    return (
        <EdrmsUseReportStyled>
            <div ref={chartRef} style={{ width: '100%', height: '100%' }}>
            </div>

        </EdrmsUseReportStyled>
    );
};

export default EdrmsUseReport;
